<script setup>
import {getRequest, postRequest} from "@/util/request.js";
import {reactive, ref} from "vue";
import {useRouter} from "vue-router";
import {validInput1} from "../util/valid.js";
import {getInfo} from "@/util/user.js";

let router = useRouter();
let codeUrl = ref("");
let url = {
  captcha: "/user/captcha",
  login: "/user/login",
  otherLogin: "/oauth/login"
};
let loginForm = reactive({
  account: "",
  password: "",
  code: "",
  key: "",
});
let intervalCode;
let loginRules = {
  account: [
    {required: true, trigger: "blur", message: "请输入账号"},
    {min: 4, max: 10, trigger: "blur", message: "账号长度必须在4~10位"},
    {validator: validInput1, trigger: "blur"}
  ],
  password: [
    {required: true, trigger: "blur", message: "请输入密码"},
    {min: 6, max: 20, trigger: "blur", message: "密码长度必须在6~20"},
  ],
  code: [{required: true, trigger: "blur", message: "请输入验证码"}],
};

function getCode() {
  clearInterval(intervalCode);
  captcha();
  intervalCode = setInterval(function () {
    captcha();
  }, 60000);
}

let loginRef = ref();

function captcha() {
  getRequest(url.captcha, {type: 'login'}).then(res => {
    codeUrl.value = res.data.image;
    loginForm.key = res.data.key;
  })
}

function handleLogin() {
  loginRef.value.validate(valid => {
    if (valid) {
      postRequest(url.login, loginForm).then(res => {
        clearInterval(intervalCode);
        localStorage.setItem("tokenName", res.data.tokenName);
        localStorage.setItem("tokenValue", res.data.tokenValue);
        getInfo();
      });
    }
  });
}

getCode();
</script>

<template>
  <div class="body">
    <div class="loginDiv">
      <div class="title">宏意星</div>
      <el-form
          ref="loginRef"
          :model="loginForm"
          :rules="loginRules"
      >
        <el-form-item prop="account">
          <el-input class="input" style="width: 300px" placeholder="账号" v-model="loginForm.account"
                    maxlength="10"/>
        </el-form-item>
        <el-form-item prop="password">
          <el-input class="input" style="width: 300px" placeholder="密码" v-model="loginForm.password" maxlength="20"
                    type="password" show-password/>
        </el-form-item>
        <el-form-item prop="code">
          <el-input class="input" style="width: 150px" placeholder="验证码" v-model="loginForm.code"
                    @keyup.enter="handleLogin" maxlength="4"/>
          <div style="margin-left: 20px">
            <img :src="codeUrl" @click="getCode" class="login-code-img" alt=""/>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
              type="primary"
              style="width: 100%; margin-bottom: 20px"
              @click="handleLogin"
          >登 录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
.body {
  display: flex;
  justify-content: center;

  .loginDiv {
    padding-top: 250px;
    width: 300px;
    text-align: center;

    .title {
      font-size: 30px;
      font-weight: 500;
      color: #5fb878;
      height: 60px;
      line-height: 60px;
      margin-bottom: 20px;
    }
  }
}

.input {
  height: 40px;
}

.login-code-img {
  height: 40px;
  cursor: pointer;
}
</style>